<template>
	<!-- 景点介绍跳这里 -->
	<view class="spot-page">
		<view class="title">{{ detail.name }}</view>
		<view class="intro">
			<view class="intro-des">
				<view v-for="(item, index) in detail.intro" :key="index" class="desc-item">{{ item }}</view>
			</view>
			<!-- <view class="intro-des" :class="{ 'expanded': isExpanded }">
                <view v-for="(item, index) in detail.intro" :key="index" class="desc-item">{{ item }}</view>
            </view>
            <text v-if="showToggleButton" class="toggle-btn" @tap="toggleExpand">
                {{ isExpanded ? '收起' : '展开全部' }}
            </text> -->
			<view v-if="imageList.length" class="intro-multip">
				<view v-for="(item, index) in imageList" :key="index" class="intro-multip-item">
					<image :src="item" mode="widthFix" class="intro-multip-item__img" />
				</view>
			</view>
			<view v-if="currentImage" class="intro-single">
				<image :src="currentImage" mode="widthFix" class="intro-single-img" />
			</view>
		</view>
		<view v-if="detail.openHours" class="open">
			<view class="sub-title">{{$t('spotIntro.openingHours')}}</view>
			<view class="open-desc">{{ detail.openHours }}</view>
		</view>
		<view v-if="detail.address" class="address">
			<view class="sub-title">{{$t('spotIntro.locationAndTransportation')}}</view>
			<view class="address-desc">
				<uni-icons type="location" size="20" color="#4f46e5" style="margin-right: 10rpx"></uni-icons>
				<view class="address-text">{{ detail.address }}</view>
				<view class="address-btn" @tap="openMap">{{$t('spotIntro.navigation')}}</view>
			</view>
		</view>
		<view v-if="detail.transportationList" class="trans">
			<view class="sub-title">{{$t('spotIntro.transportationMethods')}}</view>
			<view v-for="(item, index) in detail.transportationList" :key="index" class="trans-item">
				<view class="trans-title">{{ item.title }}</view>
				<view class="trans-desc">{{ item.description }}</view>
			</view>
		</view>
		<view v-if="detail.guideIds" class="guide">
			<view class="guide-title">
				<view class="sub-title">{{$t('spotIntro.travelGuide')}}</view>
				<view class="more" @tap="seeMoreGuid">
					<text>{{$t('spotIntro.viewMore')}}</text>
					<image src="@/static/home/right-arrow.png" mode="aspectFit" class="more_icon"></image>
				</view>
			</view>
		</view>
		<scroll-view :scroll-x="true">
			<view class="spot-list">
				<view v-for="(item, index) in detail.guideIds" :key="index" class="spot-item"
					@tap="seeSingleGuide(item)">
					<image :src="detail.guideDetails[index].CoverImg" mode="aspectFill" class="spot-img" />
					<view class="spot-desc">{{ detail.guideDetails[index].Title }}</view>
				</view>
			</view>
		</scroll-view>
		<!--  	
	//评论区
	 <view class="comment-section">
            <view class="comment-title">{{$t('spotIntro.comments')}}({{ comments.length }})</view>
            <view v-for="(item, idx) in comments" :key="idx" class="comment-item">
                <image class="avatar" v-if="item.HeadImg" :src="item.HeadImg" />
                <view class="comment-content">
                    <view class="comment-header">
                        <text class="nickname" v-if="item.UserName">{{item.UserName}}</text>
                        <text class="time" v-if="item.AddTime">{{item.AddTime}}</text>
                        </view>
                    <view class="text" v-if="item.ContentText">{{item.ContentText}}</view>
                </view>
            </view>
        </view> -->
	</view>
</template>

<script>
	import {
		getArticleDetail,
		getArticleCommentList
	} from "@/api/homePage";
	import {
		getScenicSpotTmplData
	} from '@/api/ws.js';

	export default {
		name: 'SpotIntro',
		data() {
			return {
				detail: {},
				imageList: [],
				currentImage: '',
				oldDetail: {},
				showToggleButton: false,
				isExpanded: false,
				comments: [],
				id: ''
			}
		},
		async onLoad(options) {
			if (options && options.id) {
				this.id = options.id;
				try {
					await Promise.all([
						this.getOldData(options.id),
						this.getNewData(options.id),
						this.getEvaluations({
							Index: 1,
							Size: 10,
							ArticleId: options.id
						})
					])
					if (this.detail.guideIds) {
						this.getGuideDetail(this.detail.guideIds);
					}
					if (this.detail.imageList) {
						const {
							length
						} = this.detail.imageList;
						if (length % 2 !== 0) this.currentImage = this.detail.imageList.pop();
						this.imageList = this.detail.imageList;
					}
					uni.setNavigationBarTitle({
						title: this.detail.name
					})
					this.$nextTick(() => {
						setTimeout(() => {
							this.checkShowToggleButton();
						}, 100);
					});
				} catch (error) {
					console.error('接口请求出错', error);
				}
			}
		},
		methods: {
			async getOldData(id) {
				try {
					const {
						Data
					} = await getArticleDetail({
						Id: id
					});
					this.oldDetail = Data;
				} catch (error) {
					console.log('获取原先接口数据异常', error)
				}
			},
			async getNewData(id) {
				try {
					const {
						code,
						result
					} = await getScenicSpotTmplData(id);
					if (code === 200) this.detail = result;
				} catch (error) {
					console.log('获取景区详情接口数据异常', error)
				}
			},
			async getEvaluations(params) {
				try {
					const {
						Data
					} = await getArticleCommentList(params);
					if (Data) {
						this.comments = Array.isArray(Data) ? Data : [];
					}
				} catch (error) {
					console.log('获取评论列表接口数据异常', error)
				}
			},
			getGuideDetail(guideIds) {
				this.detail.guideDetails = [];
				for (const [index, id] of guideIds.entries()) {
					getArticleDetail({
						Id: id
					}).then(res => {
						this.detail.guideDetails[index] = {
							CoverImg: res.Data.CoverImg,
							Title: res.Data.Title
						}
					})
				}
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
			checkShowToggleButton() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.intro-des').boundingClientRect(rect => {
					if (rect) {
						const maxHeight = 20 * 3;
						this.showToggleButton = rect.height > maxHeight;
					}
				}).exec();
			},
			seeMoreGuid() {
				uni.navigateTo({
					url: `/scenicSpot_subpages/raiders/list?id=3607&attractions=true`
				});
			},
			seeSingleGuide(item) {
				uni.navigateTo({
					url: `/mall_subpages/raiders/details?id=${item}&type=2`
				});
			},
			openMap() {
				const {
					name,
					address
				} = this.detail;
				const {
					Lat,
					Lng
				} = this.oldDetail;
				// console.log("Lat =>", Lat);
				// console.log("Lng =>", Lng);
				// console.log("name =>", name);
				// console.log("address =>", address);
				if (!Lat || !Lng) return uni.showToast({
					title: this.$t('spotIntro.noLocationInfo'),
					icon: 'none'
				});
				uni.openLocation({
					name,
					address,
					latitude: parseFloat(Lat),
					longitude: parseFloat(Lng),
					success: () => {
						console.log(this.$t('spotIntro.mapSuccess'));
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.spot-page {
		min-height: 100vh;
		padding: 20rpx 20rpx 40rpx 20rpx;
		background-color: #F5F6F7;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			line-height: 1.4;
		}

		.intro {
			position: relative;

			.intro-des {

				// overflow: hidden;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 3;
				// transition: all 0.3s ease;
				// &.expanded {
				//     -webkit-line-clamp: unset;
				// }
				.desc-item {
					text-indent: 2em;
				}
			}

			.intro-multip {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				&-item {
					width: calc(50% - 12rpx);
					// height: 340rpx;
					margin-top: 20rpx;

					&__img {
						width: 100%;
						// height: 100%;
						display: block;
					}
				}
			}

			.intro-single {
				width: 100%;
				// height: 340rpx;
				margin-top: 20rpx;

				&-img {
					width: 100%;
					// height: 100%;
					display: block;
				}
			}

			.toggle-btn {
				color: #4f46e5;
				cursor: pointer;
				margin-top: 6rpx;
			}
		}

		.spot-list {
			display: flex;
			gap: 20rpx;
			margin-top: 10rpx;

			.spot-item {
				width: 380rpx;
				display: flex;
				flex-direction: column;
				padding: 10rpx;
				background-color: #fff;
				border-radius: 12rpx;
			}

			.spot-img {
				width: 100%;
				border-radius: 8rpx;
				aspect-ratio: 16 / 9;
			}

			.spot-desc {
				font-size: $uni-font-size-sm;
				word-wrap: break-word;
				word-break: break-all;
				margin-top: 10rpx;
			}
		}

		.open {
			margin-top: 20rpx;

			&-desc {
				font-size: $uni-font-size-base;
				margin-top: 16rpx;
			}
		}

		.address {
			margin-top: 20rpx;

			&-desc {
				display: flex;
				gap: 10rpx;
				padding: 24rpx;
				background-color: #fff;
				margin-top: 16rpx;
				border-radius: 8rpx;

				.address-text {
					flex: 1;
				}

				.address-btn {
					width: 88rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					color: #fff;
					background-color: #4f46e5;
					border-radius: 8rpx;
					font-size: 28rpx;
					cursor: pointer;
				}
			}
		}

		.guide {
			margin-top: 20rpx;

			&-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.trans {
			margin-top: 20rpx;

			&-item {
				margin-top: 10rpx;
			}

			&-title {
				font-size: $uni-font-size-base;
			}

			&-desc {
				font-size: $uni-font-size-sm;
			}
		}

		.sub-title {
			font-size: $uni-font-size-lg;
			font-weight: bold;
			line-height: 1.4;
		}

		.more {
			font-size: 26rpx;
			color: #90949C;
			display: flex;
			align-items: center;
			gap: 10rpx;

			.more_icon {
				width: 12rpx;
				height: 22rpx;
				transform: translateY(1rpx);
			}
		}

		.comment-section {
			padding: 30rpx;
			background: #fff;
			border-radius: 20rpx;
			margin: 30rpx 0;

			.comment-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.comment-item {
				display: flex;
				margin-bottom: 30rpx;

				.avatar {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.comment-content {
					flex: 1;

					.comment-header {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						.nickname {
							font-weight: bold;
							margin-right: 16rpx;
						}

						.time {
							color: #999;
							font-size: 24rpx;
						}
					}

					.text {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>